<template>
    <div class="common-layout">

      <el-container>
        <!--头部-->
        <div class="hand">
          <el-menu  mode="horizontal"
                    text-color="#fff"
                    style="
                    margin-top: 3px;
                    height: 30px;
                    background-color: rgb(48,48,53);"
                    class="custom-menu"
          >
            <el-menu-item v-for="item in Arr">
              <span @click="router.push(item.url)" style="color: grey">
                  {{item.name}}
              </span>
            </el-menu-item>
            <el-a style="margin-left: 35% ;margin-top: 3px" class="rlbutton">
              <span @click="router.push(item.url)" style="color: grey" v-for="item in Arruser" >
                  <a>
                     {{item.Name+' '}}
                  </a>
              </span>
            </el-a>
          </el-menu>
        </div>
        <div style="height: 100px;background-color: rgb(245,245,245)">
          <el-row :gutter="10">
            <!--logo-->
            <el-col :span="4">
              <div style="width: 200px;height: 90%;margin-left: 10%;margin-top: 5px;float: left" class="logo">
                <img src="/logo.png" style="width: 50px;margin-top: 10px">
                <h1 style="color: cornflowerblue">Home1ess</h1>
              </div>

            </el-col>
            <!--选择地址和搜索-->
            <el-col :span="13" >
              <el-dropdown style="margin-top: 30px;margin-left: -500px">
                <el-button >
                  请选择地址<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>北京</el-dropdown-item>
                    <el-dropdown-item>天津</el-dropdown-item>
                    <el-dropdown-item>上海</el-dropdown-item>
                    <el-dropdown-item>河北</el-dropdown-item>
                    <el-dropdown-item>河南</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-input placeholder="请输入您要搜索的内容" style="margin-top: 25px;height: 50px;width: 500px;margin-right: -600px;margin-left: 50px" v-model="wd" >
                <template #append>
                  <!--注意:此图标必须在下方的JS代码中导入！-->
                  <el-button :icon="Search" @click="router.push('/list?wd='+wd)"></el-button>
                </template>
              </el-input>
            </el-col>
            <!--留白区域-->
            <el-col :span="7">

            </el-col>
          </el-row>
          </div>
        <!-- 页面内容 -->
        <el-main>
          <router-view/>
        </el-main>
        <!--底部-->
          <el-footer style="background-color:rgb(245,245,245);color:#666;height: 300px;padding:50px;text-align: center;">
            <div style="width: 1200px;margin: 0 auto;">
              <el-row :gutter="10">
                <!--底部左侧区域-->
                <el-col :span="8">
                  <img src="/logo.png" style="width: 80px">
                  <p>想要租房就看Home1ess</p>
                  <p>租房首选平台</p>
                  <p>全国成千上万房子等你来</p>
                </el-col>
                <!--底部中间区域-->
                <el-col :span="8" id="footer-center">
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <h3>关于我们</h3>
                      <p>我要租房</p>
                      <p>租房视频</p>
                      <p>分类信息</p>
                      <p>我要出租</p>
                      <p>社区交流</p>
                    </el-col>
                    <el-col :span="8">
                      <h3>服务与支持</h3>
                      <p>联系我们</p>
                      <p>广告投放</p>
                      <p>用户协议</p>
                      <p>友情链接</p>
                      <p>在线反馈</p>
                    </el-col>
                    <el-col :span="8">
                      <h3>底部导航</h3>
                      <p>Archiver</p>
                      <p>手机版</p>
                      <p>小黑屋</p>
                    </el-col>
                  </el-row>
                </el-col>
                <!--底部右侧区域-->
                <el-col :span="8">
                  <p style="font-size:60px;color:#666;margin: 10px 0;">
                    <span style="color:cornflowerblue;">Home</span>1ess
                  </p>
                  <p >租房<span style="color: cornflowerblue">首选</span>平台</p>
                </el-col>
              </el-row>
            </div>
          </el-footer>
      </el-container>
    </div>
</template>
<script setup>
import {Search} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";

const Arr=ref([]);
const Arruser=[
  {Name:"注册",url:'/reg'},
  {Name:"登录",url:'/Login'},

];
const wd=ref();

//查询所有
const initData=()=>{
  axios.get('http://localhost:8082/navgation/navgationAll')
      .then((response)=>{
        if (response.data.code==2001){
          console.log(response.data.data);
          Arr.value=response.data.data;
          console.log("数据值:"+Arr.value);
        }
      });
}
onMounted(()=>{
  initData();
})



</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.hand{
  height: 30px;
  background-color: rgb(48,48,53);
}
.rlbutton a:hover{
    color: var(--el-color-primary);
}
.logo {
  border-right-width: 5px; /* 设置右边框宽度 */
  border-right-style: solid; /* 设置右边框样式 */
  border-right-color: deepskyblue; /* 设置右边框颜色 */
}
</style>